import { useEffect, useState } from "react";
import { useRouter } from 'next/router'
import Link from 'next/link'


export default function Fetchdemo(props) {
    let [data, setData] = useState('2s后出现数据')
    const router = useRouter()
    console.log(props, router);

    // 页面请求
    useEffect(async () => {
        await new Promise((res, rej) => {
            setTimeout(() => {
                setData('这是页面生成后的异步数据')
                res()
            }, 2000)
        })
    }, [])


    return <div>
        这是aa页面
        <div>props:{JSON.stringify(props)}</div>
        <Link href="/fetch-demo?t=111" shallow>跳转页面 /fetch-demo?t=111，无需刷新页面</Link><br />
        <Link href="/fetch-demo?t=222" >跳转页面 /fetch-demo?t=222，需刷新页面</Link>
        <div>页面生成后的异步数据：{data}</div>
    </div>
}

/**
 * 静态生成
 * 跟服务器端渲染的钩子只能2选1
 */
export async function getStaticProps(context) {
    let a
    await new Promise((res, rej) => {
        setTimeout(() => {
            a = '这是异步请求的静态生成数据(静态生成)'
            res()
        }, 2000)
    })
    console.log('context:', context);
    return {
        props: {
            a
        },
        revalidate: 1, // 每1秒钟重新获取新的数据（增量静态再生）
    }
}

/**
 * 服务器端渲染
 * 跟静态生成的钩子只能2选1
 */
// export async function getServerSideProps(context) {
//     let b
//     await new Promise((res, rej) => {
//         setTimeout(() => {
//             b = '这是异步请求的静态生成数据(服务器端渲染)'
//             res()
//         }, 2000)
//     })
//     console.log('getServerSidePropsContext:', context);
//     return {
//         props: {
//             b
//         }
//     }
// }
